<template>
    <div class="card rdsp-card-view maintainceSafety-page" data-page="maintainceSafety">
        <div class="maintainceSafety-con" @click="goSingle()">
	        <div class="maintainceSafety-con-bg build-bg-white">
	            <div class="left">
	                <span>
	                    <p class="t" id="saftyText">危险</p>
	                    <p id="subSaftyText">需要及时整改</p>
	                </span>
	            </div>
	            <div class="right">
	                <!-- <div class="maintainceSafetyChart-value" id="saftyNumber">0</div> -->
	                <div id="maintainceSafetyChart"></div>
	            </div>
	        </div>   
        </div> 
    </div>
</template>
<style scoped>

</style>
<script>
    return {
        data:function () {
            return{
                saftyNum:0
            }
        },
        methods: {
            goSingle(){
                single_Orgid = single_Orgid_wbdw;
                single_OrgName = single_OrgName_wbdw;
                app.router.navigate("/soleKanban/");
            },
            getSafeNumberAndText:function(){
                let self = this;
                Dao.getScoreItemDetail({
                    orgId:single_Orgid_wbdw
                },function(data){
                    if(data){
                        self.saftyNum = data.score;
                        $("#saftyText").html(getTextColorByScore(self.saftyNum).split(",")[0]);
                        $("#subSaftyText").show().html(getTextColorByScore(self.saftyNum).split(",")[1]);
                        self.getColorBg(self.saftyNum);
                        self.drawAnnularChart();
                    }
                });
            },
            getColorBg:function(score) {
              jQuery(".maintainceSafety-con").removeClass("red yellow green");  
              let fixScore = parseFloat(parseFloat(score).toFixed(1));
              //风险
              if(79.9< fixScore && fixScore < 89.9){
                jQuery(".maintainceSafety-con").addClass("yellow");
              }
              //高危
              else if(fixScore < 80){
                jQuery(".maintainceSafety-con").addClass("red");
              }
              //安全
              else{
                jQuery(".maintainceSafety-con").addClass("green");
              }
            },
            drawAnnularChart:function(){
                let self = this;
                let value = self.saftyNum;
                if(isFloat(self.saftyNum)){
                    value = self.saftyNum.toFixed(1);
                }
                let myChart = echarts.init(document.getElementById('maintainceSafetyChart'));
                option = {
                    color: ['rgba(255, 255, 255, 0.6)', 'rgba(255, 255, 255, 0.2)'],
                    title: {
                        text:value,
                        left:'center',
                        top:'center',
                        textStyle:{
                            color:'#fff',
                            fontSize:23,
                            align:'center'
                        }
                    },
                    series: [{
                        name: '',
                        type: 'pie',
                        radius: ['50%', '58%'],
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [{
                                value: 100 - value,
                                name: ''
                            },
                            {
                                value: value,
                                name: ''
                            },
                        ]
                    }]
                };
                myChart.setOption(option, true);
            }
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                self.getSafeNumberAndText();
            },
            pageAfterIn: function (e, page) {
                var self = this;
                
            }
        }
    }
</script>